<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body" style="height: 100%">
        <!--首行，标题-->
        <div class="d-flex jc-center row title_wrap" style="height: 50px">
          <dv-decoration-10 class="dv-dec-10" />
          <div class="d-flex jc-center">
            <dv-decoration-8 class="dv-dec-8" :color="decorationColor" />
            <div class="title">
              <dv-decoration-1 class="dv-dec-1" />
              <span class="title-text colorFont" style="width: 100% ; font-size: 30px;">岳阳东颂产线生产信息</span>
              <dv-decoration-6
                class="dv-dec-6"
                :reverse="true"
                :color="['#50e3c2', '#67a1e5']"
              />
            </div>
            <dv-decoration-8
              class="dv-dec-8"
              :reverse="true"
              :color="decorationColor"
            />
          </div>
          <dv-decoration-10 class="dv-dec-10-s" />
        </div>

        <!-- 第二行
        d-flex= display:flex, 设置该div为flex流式容器
        jc-between = justify-content: space-between;  /* 均匀排列每个元素首个元素放置于起点，末尾元素放置于终点 */
        aside-width=width: 40%;
        -->
        <div class="d-flex jc-between px-2 row" style="height: 50px">
          <div class="d-flex aside-width">
            <div class="react-left ml-4 react-l-s" style="width: 80%">
              <span class="react-left"></span>
              <!--
              <span class="text purPleTitle" style="font-size: large;font-weight: bold;cursor: pointer" @click="fetchData()">机台状态</span>
              <div class="text statusGreen statusBall1" style="margin-left: 20px">正常</div>
              <div class="text statusYellow statusBall1" style="margin-left: 20px">警告</div>
              <div class="text statusRed statusBall1" style="margin-left: 20px">问题</div>
              -->
              <span class="text purPleTitle" style="font-size: larger;cursor:pointer;" v-html="plineInfo"
              @click="fetchData(1)"></span>
              <span class="text" style="margin-left: 20px;color: #00fdfa;font-size: larger" @click="handleChangeLine">{{tianqi}}</span>
            </div>
            <!--
            <div class="react-left ml-3">
              <span class="text">数据分析2</span>
            </div>-->
          </div>
          <div class="d-flex aside-width" style="justify-content: flex-end">
            <div class="react-right bg-color-blue mr-3">
              <span class="text fw-b colorFont">东颂智慧屏</span>
            </div>
            <div class="react-right mr-4 react-l-s">
              <span class="react-after"></span>
              <span class="text" style="color: #ffc107"
                >{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span
              >
            </div>
          </div>
        </div>
        <!-- 第三行数据 -->
        <div class="body-box" style="height: 964px;">
          <!--左侧-->
          <div class="d-flex jc-between px-2" style="height:98%">
            <div style="width: 400px;margin-right: 15px"  >
               <ItemWrap
                      title="MO列表"
                      style="width: 380px;padding: 10px 10px 16px 10px;height:calc(17%)">
                    <molist :data="store.data.mosList" label="MO"  :nameStyle="{'margin-right':'5px'}"/>
               </ItemWrap>
              <ItemWrap
                  title="车间管理人员"
                  style="width: 380px;padding: 10px 10px 16px 10px;height:calc(83%)">
                  <staff-list/>
              </ItemWrap>
            </div>
            <!--中间-->
            <div style="width: calc(100% - 500px);height: 100%;margin-right: 10px">
              <!--生产线区域--->
              <div style="display: flex;flex-direction: row;height: calc(58%)">
                <ItemWrap
                    title="生产线动态产值"
                    style="width: 100%;padding: 10px 10px 16px 10px;height:calc(100%)">
                  <div class="d-flex" style="flex-direction: column;height: 100%;padding: 10px">
                    <dv-decoration-3 class="dv-dec-3" />
                    <device-hor style="margin-top: 10px" :data="store.data.deviceList"
                                height="400px" width="100%"/>
                  </div>
                </ItemWrap>
              </div>
              <!--直通率区域--->
              <div style="display: flex;flex-direction: row;height: calc(42%)">
                <ItemWrap
                    title=""
                    style="width: 100%;padding: 10px 10px 16px 10px;height:calc(100%)">
                  <div class="d-flex" style="flex-direction: column;height: 100%;padding: 10px">
                    <dv-decoration-3 class="dv-dec-3" />
                    <qcdata :cdata="store.qcList" :show-value="false" />
                  </div>
                </ItemWrap>
              </div>
            </div>
            <!--右侧-->
            <div style="width: 450px;"  >
              <flash-title2 title="工段产值"/>
              <molist :data="store.data.processList" value-label="产出" height="180px"
                      :step="-1" width="350px"  :name-style="{width:'110px','text-align':'right'}"/>
              <flash-title2 title="FQC检验" :cstyle="{'margin-top':'10px',height:'25px'}"/>
              <molist :data="store.data.fqcList" label="" value-label="" height="100px"
                      :step="-1" width="350px"  />
                <circle-chart :cdata="{data:store.data.viQcList,title:'外观不良TOP5'}" :cstyle="{'margin-top':'25px'}"
                 height="270px"/>
                <circle-chart :cdata="{data:store.data.runInList,title:'老化TOP5'}" />
            </div>
          </div>
          <!-- 下部 隐藏 -->
          <div class="d-flex jc-between px-2 " style="height: calc(38% - 38px);margin-top: 20px" v-if="false">
            <div style="width: calc(100% - 285px)"  >
              <ItemWrap
                      title=""
                      style="padding: 0 10px 16px 10px">
                <div style="display: flex;flex-direction: row;">
                  <plinelist :data="store.data.lineList" style="width:330px;margin-left: 10px"/>
                  <qcdata :cdata="store.qcList" :show-value="false" style="width: calc(100% - 430px);margin-left: 50px"/>
                </div>
              </ItemWrap>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import drawMixin from "../../utils/drawMixin";
import { formatTime } from '../../utils/index.js'
import deviceHor from "./device-hor";
import circleChart from "./circle-chart";

//import centerLeft1 from './centerLeft1'
//import centerLeft2 from './centerLeft2'

//import prodLine from './prodLine'
import molist from './molist'
import plinelist from './plinelist'
import qcdata from './qcdata'
//import {getAction} from "../../api/manage"
import store from "./store"
import signMd5Utils from "@/utils/encryption/signMd5Utils";
import axios from 'axios'
import staffList from "./staffList";
import VueCookie from 'vue-cookie'
import Vue from 'vue'
import {getAction} from "../../api/manage";
Vue.use(VueCookie)
export function httpGet(url,parameter,headers) {
  let sign = signMd5Utils.getSign(url, parameter);
  //将签名和时间戳，添加在请求接口 Header
  let signHeader = {"X-Sign": sign,"X-TIMESTAMP": signMd5Utils.getDateTimeToString()};

  return axios({
    url: url,
    method: 'get',
    params: parameter,
    headers:typeof headers=="undefined"||(typeof headers=="boolean"&&headers) ?signHeader:
        ((typeof headers=="boolean"&&!headers)?null:headers)
  })
}
String.prototype.format = function(){
  if(arguments.length==0){
    return this;
  }
  let args
  if (typeof arguments[0]=="object"){
    args=arguments[0]
    var s=this
    Object.keys(args).forEach((k)=>{
      s = s.replace(new RegExp("\\{"+k+"\\}","g"), args[k]);
    })
  }
  else{
    args=arguments
    for(var ss=this, i=0; i<args.length; i++){
      ss = ss.replace(new RegExp("\\{"+i+"\\}","g"), args[i]);
    }
    s=ss
  }
  return s;
};

export default {
  mixins: [ drawMixin ],
  data() {
    return {
      orgid:102,
      enhanceJs:window.jsEnhanceObject,
      plineInfo:'',
      tianqi:"多云 12℃  9-13℃ 东莞",
      store,
      timing: null,
      timTianQi:null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      decorationColor: ['#568aea', '#568aea']
    }
  },
  components: {
   // prodLine,
    staffList,
    deviceHor,circleChart,
    molist,plinelist,qcdata
  },
  created() {
    window.m4Vue=this
      this.fetchData()
      let p=()=> {
        setTimeout(() => {
          this.fetchData()
          p()
        }, 30000)
      }
      p()
  },
  mounted() {
    this.timeFn()
    this.cancelLoading()
    let fetchTianqi=()=>{
      httpGet("https://www.yiketianqi.com/free/day?appid=23996323&appsecret=R2CA6JTr&unescape=1",null,false).then(ret=>{
        let res=ret.data
        if (res.errcode) return
        this.tianqi=res.city+" "+res.tem+"℃  "+res.wea+"  "+res.tem_night+"-"+res.tem_day+"℃  "+res.win+res.win_speed
      })
    }
    this.timTianQi=setInterval(fetchTianqi,3600000)
    fetchTianqi()
    setTimeout(()=>{
      let rows=document.getElementsByClassName("row")
      let rowsHeight=0
      for (let i=0 ;i< rows.length;i++) {
        rowsHeight+=rows[i].clientHeight
      }
      let lastRowHeight=document.getElementsByClassName("host-body")[0].clientHeight-rowsHeight;
      //alert(lastRowHeight)
      document.getElementsByClassName("body-box")[0].style.height=lastRowHeight+'px'
      this.$nextTick(()=>{
      })
    },1000)
    setTimeout(()=>{
      this.resize1()
    },40000)
  },
  beforeDestroy () {
    clearInterval(this.timing)
    clearInterval(this.timTianQi)
  },
  methods: {
    handleChangeLine(){
      let pline=this.$cookie.get("pline")
      console.log('pline',pline)
        pline=prompt('设置产线编号',pline)
        if (!pline) return
        pline=pline.toUpperCase().trim()
        if (!pline) return
        this.$cookie.set('pline',pline,'3600d')
        this.fetch(pline)
    },
    isEnhanced(){
      return typeof this.enhanceJs !='undefined'
    },
    resize1(){
      if (this.isEnhanced()){
        this.enhanceJs.resize()
      }
    },
    getLine(){
      if (this.isEnhanced()){
        return this.enhanceJs.getLine()
      }
      return "L01"
    },
    fetch(pline){
      //getAction("http://192.168.205.1:8080/api/mes.bigscreen/line/get?orgid={0}&pline={1}".format(this.orgid,pline))
      getAction("http://192.168.30.247:8089/api/mes.bigscreen/line/get?orgid={0}&pline={1}".format(this.orgid,pline))
          .then(res=>{
            if (res.status!=200) {
              alert("访问服务端出错")
              return
            }
            console.log("结果",res)
            this.store.setData(res.data.result)
            this.plineInfo="生产线&nbsp;&nbsp;-&nbsp;&nbsp;{name}&nbsp;&nbsp;&nbsp;&nbsp;人数&nbsp;&nbsp;-&nbsp;&nbsp;{staffCount}"
                .format(this.store.data.lineInfo)
          })
      console.log(pline)
    },
    fetchData(flag){
      let pline=this.$cookie.get("pline")||this.getLine()
      console.log('pline',pline)
      if (!pline){
        pline=prompt('设置产线编号','L01')
        if (!pline) return
        pline=pline.toUpperCase().trim()
        if (!pline) return
        this.$cookie.set('pline',pline,'3600d')
      }
      if (flag){
        this.resize1()
      }
      this.fetch(pline)

      //getAction("http://192.168.30.247:58080/api/mes.bigscreen/digital-factory/get?orgid="+this.orgid)
      /*getAction("http://192.168.20.1:8090/api/mes.bigscreen/digital-factory/get?orgid="+this.orgid)
      .then(res=>{
         if (res.status!=200) {
           alert("访问服务端出错")
           return
         }
         console.log("结果",res)
         this.store.setData(res.data.result)
      })*/

    },
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), 'HH: mm: ss')
        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
        this.dateWeek = this.weekday[new Date().getDay()]
      }, 1000)
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false
      }, 500)
    }
  }
}
console.log(window.opener)
/*if (window.opener==undefined){
  window.open(window.location.href,'newwindow',
          'width='+(window.screen.availWidth-10)+',height='+(window.screen.availHeight-30)+
          ',top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')

}*/
</script>

<style lang="scss" scoped>

@import '../../assets/m3/index.scss';
  .leftChart1{
    width: 22%;
    padding: 10px;
    box-sizing: border-box;

    .border-box-content {
      flex-direction: column;
    }
  }
.title {
  position: relative;
  // width: 500px;
  text-align: center;
  background-size: cover;
  color: transparent;
  height: 60px;
  line-height: 46px;

  .title-text {
    font-size: 38px;
    font-weight: 900;
    letter-spacing: 6px;
    width: 100%;
    background: linear-gradient(92deg, #0072FF 0%, #00EAFF 48.8525390625%, #01AAFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.dv-dec-3 {
  position: absolute;
  width: 55px;
  height: 20px;
  top: 1px;
  left: 10px;
}
  .purPleTitle{
    font-size: large;
    font-weight: bold;
    background-color: #562fde;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 0px 10px
  }
.statusBall1{
  background-size: 30px;
  background-repeat: no-repeat;
  background-position: left;
  padding-left: 30px;
}
  .statusYellow{
    background-image: url("../../assets/img/state.png");
  }
.statusGreen{
  background-image: url("../../assets/img/state1.png");
}
.statusRed{
  background-image: url("../../assets/img/state2.png");
}
</style>
